<template>
  <view class="skill-page">
    <!-- tabs -->
    <view v-if="list.length" class="tabs-view">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
        bar-width="130"
        duration=".3"
        active-color="#19b1b8"
        font-size="28"
      ></u-tabs>
    </view>
    <!-- 文档 -->
    <view v-if="list.length && current === 0" class="txt-skill">
      <view
        class="txt-skill-view"
        v-for="(item, index) in textData"
        :key="index"
      >
        <view class="txt-title">
          <view class="fs-36 fw-bold col-1c">
            {{ item.originLanguageName }}-{{ item.targetLanguageName }}
          </view>
          <view class="fs-28 fw-bold col-f1">{{ item.subDomain }}</view>
        </view>
        <view class="col-f txt-deng">P{{ item.level }}</view>
      </view>
      <view class="fs-24 col-9 txt-skill-note">
        技能申请及详情请移步至网页端查看<br />网站地址：pai.51yuyan.com
      </view>
    </view>
    <!-- 桌面排版 -->
    <view
      v-if="list.length && current === 1"
      class="desk-skill"
      v-model="deskData"
    >
      <!-- DTP排版经验 -->
      <view class="desk-con jingyan">
        <text class="fs-28 col-6">DTP排版经验：</text>
        <text class="fs-32 col-3">{{ deskData.editionExperience }}</text>
      </view>
      <!-- 擅长软件 -->
      <view class="desk-con shanchang">
        <view class="fs-28 col-6">擅长软件：</view>
        <view class="sc-view">
          <view
            class="fs-32 col-3"
            v-for="(item, index) in deskData.software"
            :key="index"
          >
            {{ item }}
            <text class="lines" v-if="index + 1 != deskData.software.length"
              >|</text
            >
          </view>
        </view>
      </view>
      <!-- 任务标签 -->
      <view class="desk-con biaoqian">
        <view class="fs-28 col-6">任务标签：</view>
        <view class="bq-view">
          <text
            class="desk-label fs-28 col-3"
            v-for="(item, index) in deskData.taskLable"
            :key="index"
            >{{ item.dtpLableName }}</text
          >
        </view>
      </view>
    </view>
    <!-- empty -->
    <empty v-if="!list.length" type="skill" />
  </view>
</template>

<script>
import { getSkill, getDeskSkill } from "@/api/user";
export default {
  data() {
    return {
      list: [], //tab选项
      current: 0, //
      textData: [],
      deskData: {
        editionExperience: "--",
        software: [],
        taskLable: [],
      },
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
    // 获取桌面排版技能信息
    getDeskSkill() {
      getDeskSkill().then((res) => {
        if (res.message === "success") {
          const data = res.data;
          if (data) {
            this.list.push({ name: "桌面排版" });
            // 排版经验
            this.deskData.editionExperience = data.editionExperience;
            // 擅长软件
            this.deskData.software =
              (data.software && JSON.parse(data.software)) || [];
            // 任务标签taskLable
            this.deskData.taskLable =
              (data.taskLable && JSON.parse(data.taskLable)) || [];
          }
        } else {
          this.$refs.uToast.show({
            title: res.message,
            type: "error",
          });
        }
      });
    },
    // 获取技能信息
    getSkill() {
      uni.showLoading();
      getSkill().then((res) => {
        if (res.message === "success") {
          let data = res.data;
          if (data.length) {
            this.list.push({ name: "文档" });
            this.getDeskSkill();
            for (let i = 0; i < data.length; i++) {
              let item = data[i].cuLevelList;
              if (item && item.length === 2 && item[1].examState === "已通过") {
                // 领域
                item[1].subDomain = (item[1].subDomain.startsWith("[")
                  ? JSON.parse(item[1].subDomain)
                  : item[1].subDomain.split(",")
                )
                  .slice(0, 2)
                  .toString();
                this.textData.push(item[1]);
              }
            }
          }
          uni.hideLoading();
        } else {
          this.$refs.uToast.show({
            title: res.message,
            type: "error",
          });
          uni.hideLoading();
        }
      });
    },
  },
  onShow() {
    this.textData = [];
    this.list = [];
    this.getSkill();
  },
};
</script>

<style lang="scss">
</style>
